<template>
  <!-- 首页侧边栏 -->
  <img src="/src/assets/image/logo.png" draggable="false" class="logo_img">
  <!-- 行 -->

  <el-row style="margin-top: 20px;margin-left: 20px;">
    <el-col>
      <!-- 
      text-color 未选中的item的颜色
      active-text-color 设置当前点item的颜色
       -->
      <el-menu
        :default-active=indexNumber
        text-color="rgb(0,0,0,0.6)"
        active-text-color="rgb(57, 182, 88)" 
      >
      <p class="item_top">推荐</p>
        <el-menu-item index="1" @click="$router.push({name:'musicList'})">
          <el-icon><icon-menu /></el-icon>
          在线音乐
          </el-menu-item>

        <el-menu-item index="2" @click="$router.push({name:'videoList'})">
          <el-icon><icon-menu /></el-icon>
          在线视频
        </el-menu-item>

        <p class="item_top">我的</p>
        <el-menu-item index="3" @click="$router.push({name:'myFavorite'})" >
          <el-icon><icon-menu /></el-icon>收藏夹
        </el-menu-item>

        <el-menu-item index="4" @click="$router.push({name:'download'})">
          <el-icon><icon-menu /></el-icon>
          <span >下载管理</span>
        </el-menu-item>

      </el-menu>

    </el-col>
  </el-row>



</template>

<script setup>
import {Menu as IconMenu,} from '@element-plus/icons-vue'
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const Route = useRoute()

//导航栏焦点对焦
const indexNumber = computed(()=>{
  switch(Route.name){
    case "musicList" :return "1";
    case "videoList" :return "2";
    case "myFavorite" :return "3";
    case "download" :return "4";
  }
})
</script>

<style scoped>
/* 侧边栏item标题 */
.item_top{
  font-size: 20px;
  font-family: "仿宋";
  font-weight: 600;
  user-select: none;
}

/* logo样式 */
.logo_img{
  width: 100%;
}
</style>

